<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>评论</span>
                <el-button type="primary">
                    <el-icon>
                        <ChatDotSquare />
                    </el-icon>发布评论
                </el-button>
            </div>
        </template>
        <div v-for="(i, index) in comments" :key="index">
            <CommentItem :publicTime="i.publicTime" :imgUrl="i.imgUrl" :text="i.text" :star="i.star"></CommentItem>
        </div>

    </el-card>

</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import CommentItem from "./CommentItem.vue";
import { apiGetComments } from '../../api/index'
import { List } from 'lodash';
interface comment {
    publicTime: String,
    imgUrl: String,
    text: String,
    star: Number
}


const comments:any = ref<List<comment>>([]);


onMounted(() => {
    apiGetComments().then(res => {
        comments.value = res.data;
    })
})
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>